<template>
    <div class='tag-page'>
        <h1>学生信息系统</h1>
        <div class="buttom">
            <button v-if="!showAdd" @click="showAdd = true" style="margin-bottom:15px">添加学生</button>
            <div v-else>
                <button @click="fn">确认添加</button><button @click="showAdd = false">取消添加</button>
                <input type="text" placeholder="请输入姓名" v-model="student.name">
                <input type="text" placeholder="请输入年龄" v-model="student.age">
                <input type="text" placeholder="请输入分数" v-model="student.mark">
            </div><br>
            <button @click="ageSortFn">按年龄排序</button><button @click="markSortFn">按分数排序</button>
        </div>

        <table border style="border-collapse: collapse;margin-top:20px" align="left">
            <thead>
                <tr>
                    <th width="100" align="center">姓名</th>
                    <th width="100" align="center">年龄</th>
                    <th width="100" align="center">分数</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in tagList" :key="item.id">
                    <td align="center">{{ item.name }}</td>
                    <td align="center">{{ item.age }}</td>
                    <td align="center">{{ item.mark }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    name: 'tag-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: 'tag-page'
        }
    },
    setup() {
        let showAdd = ref(false);
        let student = ref({});
        let ageSort = ref(1)
        let markSort = ref(1)
        let tagList = ref([
            { id: '1', name: '张三', age: 18, mark: 90 },
        ]);
        let fn = () => {
            if (!student.value.name || !student.value.age || !student.value.mark || student.value.age < 0 || student.value.mark < 0) {
                alert('请输入完整正确学生信息内容');
                return;
            }
            tagList.value.push({ id: Math.random(), ...student.value });
            console.log('添加成功', tagList.value);
            student.value = {};
        };
        let deleteFn = (id) => {
            tagList.value = tagList.value.filter(item => item.id !== id);
        }
        let ageSortFn = () => {
            ageSort.value = ageSort.value * (-1);
            tagList.value.sort((a, b) => (a.age - b.age) * ageSort.value);
        }
        let markSortFn = () => {
            markSort.value = markSort.value * (-1);
            tagList.value.sort((a, b) => (a.mark - b.mark) * markSort.value);

        }
        return {
            showAdd,
            student,
            tagList,
            ageSortFn,
            markSortFn,
            fn,
            deleteFn,
        }
    }
}
</script>

<style scoped lang="less">
.tag-page {
    width: 80%;
    margin: 0 auto;
    // border: 1px solid #000;
    padding: 10px;
    text-align: left;

    h1 {
        text-align: center;
    }

    & .buttom {

        button,
        input {
            font-size: 16px;
        }
    }

    th,
    td {
        padding: 10px;
    }
}
</style>